<template>
  <div class="register-page">
    <img class="register-page-top" src="@/assets/bg/top.svg" alt="" />
    <img class="register-page-bottom" src="@/assets/bg/bottom.svg" alt="" />
    <van-nav-bar title="注册会员" />
    <!-- 内容区 -->
    <div class="register-page-content">
      <div class="register-page-content-text">
        <div class="register-page-content-text-1">注册</div>
        <div class="register-page-content-text-2">欢迎加入物联网协会</div>
      </div>
      <div class="register-page-content-register">
        <van-form
          class="register-page-content-register-form"
          @submit="onSubmit"
        >
          <van-field
            v-model="formData.stu_no"
            name="stu_no"
            label="学号"
            placeholder="学号"
            :error-message="usererror"
            :rules="[{ required: true, message: '请填写学号' }]"
          />
          <van-field
            v-model="formData.college"
            name="college"
            label="学院"
            placeholder="学院"
            :error-message="usererror"
            :rules="[{ required: true, message: '请填写学院' }]"
          />
          <van-field
            v-model="formData.classname"
            name="classname"
            label="班级姓名"
            placeholder="例：物联网211XXX"
            :error-message="usererror"
            :rules="[{ required: true, message: '请填写姓名班级' }]"
          />
          <van-field
            v-model="formData.phone_num"
            name="phone_num"
            label="手机号"
            placeholder="手机号"
            :error-message="passwderror"
            :rules="[{ required: true, message: '请填手机号' }]"
          />
          <van-field
            v-model="formData.qq"
            name="qq"
            label="QQ"
            placeholder="QQ"
            :error-message="passwderror"
            :rules="[{ required: true, message: '请填QQ号' }]"
          />
          <div style="margin: 16px">
            <van-button
              style="
                margin-top: 20px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
              "
              round
              block
              type="info"
              native-type="submit"
              >注册会员</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
// import md5 from '@js/md5.min.js';
// import axios from'';
import { Toast } from "vant";
export default {
  name: "login",
  components: {},
  data: function () {
    return {
      formData: {
        stu_no: null,
        college: null,
        classname: null,
        qq: null,
      },
      // 用户名
      username: "",
      // 密码
      password: "",
      passwordconfirm: "",
      // md5 加密的密码
      showPicker: false,
      result: "",
      passwderror: "",
      usererror: "",
    };
  },
  created: function () {},
  methods: {
    // 后退事件
    onBackClick: function () {
      this.$router.go(-1);
    },
    // 登录按钮点击事件
    onSubmit() {
      Toast.loading("注册中...");
      this.onLoginClick();
    },
    onLoginClick: function () {
      //localStorage.setItem("islogin",1);
      //this.$router.go(-1);
      this.result = this.$md5(this.formData.phone_num.substring(this.formData.phone_num.length-6));
      console.log(this.result);
      // post
      // this.md5Password = md5(this.password);
      // if (this.password !== this.passwordconfirm) {
      //   this.passwderror = "两次输入密码不一致";
      // } else {
        this.$http
          .get("http://121.5.58.100:8000/addUserDetail", {
            params: {
              username: this.formData.stu_no,
              passwd: this.result,
              qq_num:this.formData.qq,
              phone_num:this.formData.phone_num,
              class_name:this.formData.classname,
              college:this.formData.college
            },
            //password: this.password
          })
          .then((res) => {
            Toast.clear();
            if(res.data.returncode==200){
              Toast.success("注册成功");
            }
            else{
              Toast.success("注册失败");
            }
            console.log(res.data);
          })
          .catch(function (error) {
            alert(error.response.data.msg);
            console.log(error.response.data);
            console.log(error.response.status);
            // console.log(error.response.headers);
          });
      // }
      // 判断当前的项目是运行在 Android 设备还是 IOS 设备中
      if (window.androidJSBridge) {
        // window 下存在 android 注入的对象（androidJSBridge），则表示当前项目在 android 设备中运行
        this.onLoginToAndroid();
      } else if (window.webkit) {
        // window 下存在 webkit ，表示当前项目在 IOS 设备中运行
        this.onLoginToIOS();
      }
    },
    /**
     * 忘记密码点击事件
     */
    onForgetPasswdClick: function () {
      this.$router.push({
        name: "resetpasswd",
        params: {
          routerType: "push",
        },
      });
    },
    /**
     * 立即注册点击事件
     */
    onToRegisterClick: function () {
      console.log("ok");
      this.$router.push({
        name: "register",
        params: {
          routerType: "push",
        },
      });
    },
    test: function () {
      this.axios
        .post("http://39.99.153.97:8081/package/packages", {
          phone: "18155348770",
        })
        .then((res) => {
          console.log(res);
          console.log(res.records);
          // console.log(JSON.stringify(res.records))
          this.$store.commit("aaddShoppingData", res.data.records);
        })
        .catch(function (error) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        });
      // this.$http.get('/goods').then(data => {
      //     console.log(data.list)
      //     this.goodsData = data.list;
      //     this.setSortGoodsData();
      //     this.initLayout();
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";

.register-page {
  // 页面组件过渡动画，脱离标准文档流
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: white;
  &-top {
    position: absolute;
    right: 0;
    top: 46px;
  }
  &-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  &-content {
    width: 100%;
    height: 100%;
    &-text {
      margin-top: 10vh;
      //font-family: PingFangSC-Regular;
      &-1 {
        font-size: 72px;
        color: #f7f7fb;
        letter-spacing: 0;
      }
      &-2 {
        //position: absolute;
        //bottom: 0;
        margin-left: 40px;
        float: left;
        font-size: 24px;
        color: #1d1e2c;
        letter-spacing: 0;
        transform: translateY(-48px);
      }
    }
    &-register {
      margin: 40px;
      &-form {
        padding: 0;
      }
      &-button {
        margin-top: 20px;
      }
    }
  }
}
.van-cell {
  margin: 0 0 10px 0;
  width: auto;
  border-radius: 10px;
  background: #f7f7fb;
}
</style>

